<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Partytown Test Page" />

    <title>Google Tag Manager (GTM) 🎉</title>

    <script>
      partytown = {
        resolveUrl(url, location) {
          if (
            url.hostname.includes('google-analytics') ||
            url.hostname.includes('www.googletagmanager.com')
          ) {
            const proxyUrl = new URL('https://cdn.builder.io/api/v1/proxy-api');
            proxyUrl.searchParams.append('url', url);
            return proxyUrl;
          }

          return url;
        },
        forward: ['dataLayer.push'],
        logCalls: true,
        logGetters: true,
        logSetters: true,
        logImageRequests: true,
        logMainAccess: true,
        logSendBeaconRequests: true,
        logStackTraces: false,
        logScriptExecution: true,
      };
    </script>
    <script src="/~partytown/debug/partytown.js"></script>

    <!-- Google Tag Manager -->
    <script type="text/partytown">
      (function (window, document, dataLayerName, i) {
        window[dataLayerName] = window[dataLayerName] || [];

        window[dataLayerName].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });

        var firstScript = document.getElementsByTagName('script')[0];
        var gtmScript = document.createElement('script');
        var dataLayerParam = dataLayerName != 'dataLayer' ? '&l=' + dataLayerName : '';

        gtmScript.async = true;

        // ORIGINAL
        gtmScript.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dataLayerParam;

        // HACK
        // gtmScript.src = './gtm.js?id=' + i + dataLayerParam;

        firstScript.parentNode.insertBefore(gtmScript, firstScript);
      })(window, document, 'dataLayer', 'GTM-W275NLW');
    </script>
    <!-- End Google Tag Manager -->

    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
          Apple Color Emoji, Segoe UI Emoji;
        font-size: 12px;
      }
      h1 {
        margin: 0 0 15px 0;
      }
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      a {
        display: block;
        padding: 16px 8px;
      }
      a:link,
      a:visited {
        text-decoration: none;
        color: blue;
      }
      a:hover {
        background-color: #eee;
      }
      li {
        display: flex;
        margin: 15px 0;
      }
      li strong,
      li code,
      li button {
        white-space: nowrap;
        flex: 1;
        margin: 0 5px;
      }
    </style>
  </head>
  <body>
    <h1>Google Tag Manager (GTM) 🎉</h1>

    <p>
      <strong>dataLayer.push</strong>
      <span id="testDataLayer"></span>
    </p>

    <script>
      function gtmPush() {
        const data = { event: 'button-click', from: 'partytown' };
        console.log(`GTM dataLayer.push(${JSON.stringify(data)})`);
        dataLayer.push(data);

        const testDataLayer = document.getElementById('testDataLayer');
        testDataLayer.textContent = 'pushed';
      }
    </script>
    <button id="buttonDataLayerPush" onclick="gtmPush()">Partytown dataLayer.push()</button>

    <script type="text/partytown">
      (function () {
        document.body.classList.add('completed');
      })();
    </script>

    <p><a href="/tests/integrations/gtm/standard.html">Standard GTM</a></p>
    <p>
      <a href="/tests/integrations/gtm/preserve-behavior.html"
        >Partytown GTM with preserveBehavior</a
      >
    </p>
    <p><a href="/tests/">All Tests</a></p>
  </body>
</html>
